<template>
  <view>
    <PublicPage :custoNav="true" class="qqp-index-container">
      <!-- 自定义头部 -->
      <view slot="headNav">
        <view class="u-flex custom-head-nav">
          <view class="iconfont icon-search" @click="skipSearchPage" />
          <view class="u-flex-1 tabs-wrap">
            <u-tabs
                :list="tabList"
                :current="tabCur"
                :is-scroll="false"
                :height="64"
                font-size="32"
                active-color="#E44435"
                inactive-color="#969799"
                @change="_tabChange"
            />
          </view>
        </view>
      </view>
      <!-- 自定义导航栏 -->
      <swiper :current="tabCur" class="swiper-wrap" @change="swiperChange">
        <!-- 关注列表end -->
        <swiper-item>
          <ScrollList
              v-if="dynamicList.length || listLoading1"
              ref="scrollView1"
              :scrollAnimation="false"
              @interrupt="interrupt1"
              @scrolltolower="scrolltolower1"
          >
            <template slot="content">
              <DynamicCard
                  :type="1"
                  skeletons="2"
                  :list="dynamicList"
                  :loading="listLoading1"
                  @groupBtn="_dynamicGroupBtn"
              />
            </template>
          </ScrollList>
          <!-- 缺省状态 -->
          <DefaultPage
              v-if="isEmpty1"
              type="2"
              tips="当前没有关注任何人哦～"
              configText="了解速速团"
          />
        </swiper-item>
        <!-- 关注列表start -->
        <swiper-item>
          <!-- 缺省状态 -->
          <DefaultPage
              v-if="isEmpty2"
              type="2"
              tips="暂时没有发现内容，去发布一个试试"
              configText="了解速速团"
          />
          <template v-else>
            <ScrollList
                ref="scrollView2"
                :scrollAnimation="false"
                @interrupt="interrupt2"
                @scrolltolower="scrolltolower2"
            >
              <template slot="content">
                <Waterfall ref="waterfallRef" v-model="findList" />
              </template>
            </ScrollList>
            <!-- 骨架图 -->
            <WaterfallSkeleton v-if="listLoading2" />
          </template>
        </swiper-item>
      </swiper>
      <!-- 关注公众号--原生组件 -->
      <!-- <view
          v-if="!isLogin"
          class="attention-official-account"
          :style="{bottom:attentionBottom+'px;height:170rpx;'}"
      >
        <official-account />
      </view> -->
      <!-- 关注公众号 -->
      <view
          v-if="isLogin&&userInfo.isSubscribe==0"
          class="attention-official-account"
          :style="{bottom:attentionBottom+'px'}"
      >
        <view class="attentionContent">
          <view class="left">
            <text>点击关注服务号，立享四大特权！</text>
          </view>
          <view>
            <button type="error" class="go_attention" @click.stop="_goAttention">去关注</button>
          </view>
        </view>
      </view>
    </PublicPage>
    <!-- 开团成功海报 -->
    <OpenGroupSharing
        ref="shareChild"
        @shareSuccess="_shareSuccess"
    />
    <PublishPopup
        v-if="dlGroup"
        :sharePublishData="shareObject"
        @closeSharePublishFn="(flag)=>dlGroup=flag"
    />
    <!-- 动态分享、邀请帮卖 -->
    <SharePublicPage
        v-if="dlShare"
        :shareVideoData="shareObject"
        @cancelShareFn="(flag) => dlShare = false"
        @posterFn="_posterFn"
    />
    <!-- 保存相册海报分享 -->
    <SharePoster
        v-if="dlPoster"
        :shareVideoData="shareObject"
        @cancelSharePosterFn="() => dlPoster = false"
    />
    <!-- 关注公众号弹框 -->
    <attendOfficial
        v-if="dlAttendOfficial"
        :show="dlAttendOfficial"
        :text="attendOfficialText"
        :isRefresh="true"
        @close="dlAttendOfficial=false"
    />
    <!-- 已经帮卖弹窗 -->
    <SoldForHelpSell
        v-if="isSoldForHelpSellShow"
        :soldForHelpSellId="soldForHelpSellId"
        @closeSoldForFn="closeSoldForFn"
    />
  </view>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import DynamicCard from '@/components/dynamicCard/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"
import PublishPopup from '@/components/publishPopup/index.vue'
import SharePublicPage from '@/components/shareModal/sharePublicPage.vue'
import SharePoster from '@/components/shareModal/sharePoster.vue'
import attendOfficial from '@/components/attendOfficial/index.vue'
import shareMixin from '@/components/dynamicCard/shareMixin'
import SoldForHelpSell from '@/components/soldForHelpSell/index.vue'
import Waterfall  from './waterfall.vue'
import WaterfallSkeleton from './waterfallSkeleton.vue'

import miniApi from '@/api/mini.js'

export default {
  name: 'Index',
  // 分享、海报相关在shareMixin中
  mixins: [shareMixin],
  components: {
    PublicPage,
    ScrollList,
    DefaultPage,
    DynamicCard,
    Waterfall,
    PublishPopup,
    OpenGroupSharing,
    SharePublicPage,
    SharePoster,
    attendOfficial,
    SoldForHelpSell,
    WaterfallSkeleton
  },
  computed: {
    // 用户数据
    userInfo () {
      return this.$store.state.userInfo
    },
    // 关注公众号的bottom定位
    attentionBottom() {
      const { model, navBottom } = this.$store.state.globalData
      if (model.indexOf('iPhone') !== -1) {
        return navBottom + 20
      } else {
        return navBottom
      }
    },
  },
  data() {
    return {
      tabList: Object.freeze([{name: '关注'}, {name: '发现'}]), // tabs列表
      tabCur: 1,
      dynamicList: [], // 动态卡片列表
      keyword: '', // 搜索关键词
      getParams: { currentPage: 1,pageSize: 10,type: 1 }, // 关注入参
      listMore1: true, // 当前列表是否还有更多
      listMore2: true, // 当前列表是否还有更多
      listLoading1: true, // 加载骨架图
      listLoading2: true, // 加载骨架图
      isEmpty1: false, // 是否显示空状态--配合dynamicList的长度使用，避免在页面一开始加载时先显示了空状态
      isEmpty2: false, // 是否显示空状态--配合dynamicList的长度使用，避免在页面一开始加载时先显示了空状态
      timeout: null,
      isSoldForHelpSellShow: false, // 帮卖过了不可帮卖
      soldForHelpSellId: '', // 已经帮卖返回自己帮卖团的id
      findParams: { currentPage: 1, pageSize: 10, type: 2 }, // 发现入参
      findList: []
    }
  },
  onShow() {
    // 获取用户信息--检测用户是否已经关注公众号
    this.getInfoFn()
    if (this.tabCur === 0 && (!this.dynamicList.length || this.getIsRefreshType())) {
      this.resetGetDynamics()
    } else if (this.tabCur === 1 && (!this.findList.length || this.getIsRefreshType())) {
      this.resetGetFindList()
    }
    this.setIsRefreshType(false)

    // 获取红点规则
    if(this.isLogin){
      miniApi.getMyPageInfo().then(res=>{
        this.$store.commit('SET_MY_PAGEINFO',res.data)
      })
    }
  },
  onHide() {
    // 清楚定时器标识
    if (this.timeout) clearTimeout(this.timeout)
  },
  methods: {
    skipSearchPage() {
      this.navigateTo({ url: '/pagesB/searchPage/index' })
    },
    // tabs切换
    _tabChange(index) {
      this.tabCur = index
      if (index === 0 && !this.dynamicList.length) {
        this.resetGetDynamics()
      } else if (index === 1 && !this.findList.length) {
        this.resetGetFindList()
      }
    },
    swiperChange({ detail  }) {
      this.tabCur = detail.current
      if (detail.current === 0 && !this.dynamicList.length) {
        this.resetGetDynamics()
      } else if (detail.current === 1 && !this.findList.length) {
        this.resetGetFindList()
      }
    },
    closeSoldForFn () {
      this.isSoldForHelpSellShow = false
    },
    // 获取关注--动态视频数据
    getDynamics() {
      if (!this.isLogin) {
        this.resetLoading1(400)
        this.isEmpty1 = true
        if (this.dynamicList.length) this.dynamicList = []
        return
      }
      miniApi.getHomeDynamicsV2(this.getParams).then((res) => {
        if (this.getParams.currentPage === 1) {
          this.dynamicList = res.data.records || []
          this.resetLoading1()
          if (!this.dynamicList.length) this.isEmpty1 = true
        } else {
          this.dynamicList = this.dynamicList.concat(res.data.records)
        }
        if ((this.getParams.currentPage * this.getParams.pageSize) !== this.dynamicList.length) {
          // 无更多数据标识
          this.listMore1 = false
          this.$refs.scrollView1 && this.$refs.scrollView1.loadFinish(3)
        }
      }).catch(err => {
        this.isEmpty1 = true
        this.resetLoading1(200)
        if (this.dynamicList.length) this.dynamicList = []
        this.$refs.scrollView1 && this.$refs.scrollView1.loadFinish(3)
      })
    },
    // 获取发现--动态视频数据
    getFindList() {
      if (!this.isLogin) {
        this.resetLoading2(400)
        this.isEmpty2 = true
        return
      }
      if (this.findParams.currentPage === 1) this.isEmpty2 = false
      miniApi.getHomeDynamicsV2(this.findParams).then((res) => {
        if (this.findParams.currentPage === 1) {
          this.findList = res.data.records || []
          this.resetLoading2()
          this.isEmpty2 = !!!this.findList.length
        } else {
          this.findList = this.findList.concat(res.data.records)
        }
        if ((this.findParams.currentPage * this.findParams.pageSize) !== this.findList.length) {
          // 无更多数据标识
          this.listMore2 = false
          this.$refs.scrollView2 && this.$refs.scrollView2.loadFinish(3)
        }
      }).catch(err => {
        this.isEmpty2 = true
        this.resetLoading2(200)
        this.$refs.scrollView2 && this.$refs.scrollView2.loadFinish(3)
      })
    },
    resetGetDynamics() {
      if (this.isLogin) {
        this.listLoading1 = true
        this.listMore1 = true
      }
      // 需要页面需要刷新数据
      this.getParams.currentPage = 1
      this.getDynamics()
    },
    resetGetFindList() {
      if (this.isLogin) {
        this.listLoading2 = true
        this.listMore2 = true
      }
      // 需要页面需要刷新数据
      this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
      this.findParams.currentPage = 1
      this.getFindList()
    },
    resetLoading1(time=480) {
      if (this.listLoading1) {
        setTimeout(() => {
          this.listLoading1 = false
        },time)
      }
    },
    resetLoading2(time=600) {
      if (this.listLoading2) {
        setTimeout(() => {
          this.listLoading2 = false
        }, time)
      }
    },
    // 下拉刷新方法，刷新完毕调用组件方法改变状态
    interrupt1() {
      this.listMore1 = true
      this.getParams.currentPage = 1
      this.getDynamics()
      this.timeout = setTimeout(() => {
        this.$refs.scrollView1 && this.$refs.scrollView1.refreshFinish() // 刷新完成
      }, 400);
    },
    // 底部加载更多
    scrolltolower1(){
      ++this.getParams.currentPage
      this.getDynamics()
      this.$refs.scrollView1 && this.$refs.scrollView1.loadFinish(this.listMore1 ? 0 : 3) // 加载完成
    },
    interrupt2() {
      this.resetGetFindList()
      setTimeout(() => {
        this.$refs.scrollView2 && this.$refs.scrollView2.refreshFinish() // 刷新完成
      },400)
    },
    scrolltolower2() {
      ++this.findParams.currentPage
      this.getFindList()
      this.$refs.scrollView2 && this.$refs.scrollView2.loadFinish(this.listMore2 ? 0 : 3) // 加载完成
    },
    // 跳转webview
    _goAttention() {
      this.setIsRefreshType(true)
      this.navigateTo({url: '/pagesA/components/WebView'})
    },
  }
}
</script>

<style lang="scss">
.qqp-index-container {
  position: relative;
  width: 100%;
  .swiper-wrap {
    height: 100%;
  }
  // 自定义头部start
  .icon-search {
    width: 40rpx;
    height: 40rpx;
    margin-right: 32rpx;
    font-size: 52rpx;
    color: $n6Color;
    overflow: hidden;
  }
  .tabs-wrap {
    padding: 0 88rpx 0 186rpx;
  }
  // 自定义头部end
  .attention-official-account {
    position: fixed;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 128rpx;
    padding: 0 16rpx;
    .attentionContent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 0 16rpx;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 4px;
    }
    .left {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #ffffff;
    }
    .go_attention {
      height: 64rpx;
      padding: 0 70rpx;
      font-size: 28rpx;
      border-radius: 64rpx;
      line-height: 64rpx;
      background-color: #E44435;
      color: #fff;
    }
  }
}
</style>
